<template>
  <div class="roleManagement-container">
    <el-container style="height: 1000px; border: 1px solid #eee">
      <el-header>
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col>
            <el-button icon="el-icon-arrow-left" @click="back">返回</el-button>
          </el-col>

          <el-col style="text-align: right; font-size: 12px">
            <el-button hidden icon="el-icon-upload2" @click="commit">
              提交
            </el-button>

            <el-dropdown hidden>
              <i
                class="el-icon-setting"
                style="margin-left: 15px; margin-right: 15px"
              ></i>
              <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item>查看</el-dropdown-item>
                <el-dropdown-item>新增</el-dropdown-item>
                <el-dropdown-item>删除</el-dropdown-item> -->
              </el-dropdown-menu>
            </el-dropdown>
            <span></span>
          </el-col>
        </el-row>
      </el-header>

      <el-container style="height: inherit">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <div
            style="height: 1px; width: 100%; background: rgb(238, 241, 246)"
          ></div>
          <el-card shadow="hover" :body-style="cardStyle">
            <span style="font-size: large; text-shadow: 1px">
              考试总共
              <span class="number">{{ paperQuestionDVData.length }}</span>
              题
            </span>
            <br />
            <span style="font-size: large; text-shadow: 1px">
              总分
              <span class="number">{{ paperSumScore }}</span>
              分
            </span>
            <br />
            <span style="font-size: large; text-shadow: 1px">
              总时长
              <span class="number">{{ paper.testDuration }}</span>
              分钟
            </span>
          </el-card>

          <el-card shadow="hover" :body-style="cardStyle">
            <span style="font-size: large; text-shadow: 1px">答题开始于</span>
            <br />
            <span class="number">
              {{ formatDate(answerSheet.createDate) }}
            </span>
            <br />
          </el-card>

          <el-card shadow="hover" :body-style="cardStyle">
            <span style="font-size: large; text-shadow: 1px">客观题得分</span>
            <br />
            <span class="number">
              {{ answerSheet.objectiveScore }}
            </span>
            <br />
            <span style="font-size: large; text-shadow: 1px">主观题得分</span>
            <br />
            <span class="number">
              {{ jsex.objectGet(answerSheet.subjectiveScore, 0) }}
            </span>
            <br />
            <span style="font-size: large; text-shadow: 1px">总分</span>
            <br />
            <span class="number">
              {{ answerSheet.score }}
            </span>
            <br />
          </el-card>
        </el-aside>
        <el-main style="padding-bottom: 500px">
          <el-card shadow="hover" :body-style="cardStyle">
            <span style="font-size: large; text-shadow: 1px">
              {{ paper.title }}
            </span>
          </el-card>
          <el-card shadow="hover" :body-style="cardStyle">
            {{ paper.remark }}
          </el-card>
          <el-card
            v-for="(q, i) in paperQuestionDVData"
            :key="q.id"
            shadow="hover"
            :body-style="cardStyle"
            style="text-align: left"
          >
            {{ i + 1 }} .
            <el-tag>[{{ questionType[q.question.type] }}]</el-tag>
            {{ q.question.detail }}
            <el-tag type="info" style="margin-right: 60dpx">
              {{ q.question.level }}
            </el-tag>
            <el-tag type="info" style="margin-right: 60dpx">
              分值{{ q.question.score }}
            </el-tag>

            <el-button-group style="float: right" hidden>
              <el-button
                size="small"
                icon="el-icon-upload2"
                circle
                @click="del(row.id)"
              ></el-button>
              <el-button
                size="small"
                icon="el-icon-download"
                circle
                @click="del(row.id)"
              ></el-button>
              <el-button
                size="small"
                icon="el-icon-delete"
                circle
                @click="del(row.id)"
              ></el-button>
              <el-button
                size="small"
                icon="el-icon-edit"
                circle
                @click="del(row.id)"
              ></el-button>
            </el-button-group>

            <el-button
              v-if="
                q.question.type == 'Completion' ||
                q.question.type == 'FreeResponse'
              "
              style="float: right; margin-right: 200px"
              size="small"
              icon="el-icon-edit"
              @click="showScore(q)"
            >
              {{ jsex.objectGet(q.answerDV.score, '请打分') }}
            </el-button>

            <!--            <vab-remix-icon class="logo" icon-class="radio" />-->

            <div v-if="q.question.type == 'Single'">
              <el-card
                v-for="opt in q.questionOptionAndAnswer"
                :key="opt.id"
                shadow="hover"
                class="elcardoption"
                :body-style="cardStyleOption"
                :style="!opt.isError ? '' : 'background: yellow;'"
              >
                <el-radio v-model="q.v" :label="opt.id">
                  {{ String.fromCharCode(opt.idx + 64) }}
                  {{ opt.content }}
                </el-radio>
              </el-card>
            </div>

            <div v-if="q.question.type == 'Multi'">
              <el-card
                v-for="opt in q.questionOptionAndAnswer"
                :key="opt.id"
                shadow="hover"
                class="elcardoption"
                :body-style="cardStyleOption"
                :style="!opt.isError ? '' : 'background: yellow;'"
              >
                <el-checkbox v-model="opt.isSelect" :label="opt.id">
                  {{ String.fromCharCode(opt.idx + 64) }}
                  {{ opt.content }}
                </el-checkbox>
              </el-card>
            </div>

            <div v-if="q.question.type == 'Judge'">
              <el-radio-group v-model="q.v">
                <el-card
                  v-for="opt in q.questionOptionAndAnswer"
                  :key="opt.id"
                  shadow="hover"
                  class="elcardoption"
                  :body-style="cardStyleOption"
                  :style="!opt.isError ? '' : 'background: yellow;'"
                >
                  <el-radio :label="opt.id">
                    {{ opt.content }}
                  </el-radio>
                </el-card>
              </el-radio-group>
            </div>

            <div
              v-if="
                q.question.type == 'Completion' ||
                q.question.type == 'FreeResponse'
              "
            >
              <el-input
                v-model="q.v"
                type="textarea"
                :rows="q.question.type == 'Completion' ? 1 : 3"
                placeholder="请输入内容"
                style="margin: 10px"
              >
                >
              </el-input>
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="40%">
      <span class="normaltext">考试结束，谢谢您的参与~</span>
      <br />
      <span v-if="!answerSheet.resolve" class="normaltext">
        客观题目分数：
        <span class="number">{{ answerSheet.objectiveScore }}</span>
      </span>
      <br />
      <span v-if="!answerSheet.resolve" class="normaltext">
        主观题目分数待教师修改即可查询~
      </span>
      <br />
      <span v-if="answerSheet.resolve" class="normaltext">
        总分：
        <span class="number">{{ answerSheet.score }}</span>
      </span>
      <br />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogVisible = false
            closeClick()
          "
        >
          关 闭
        </el-button>
      </span>
    </el-dialog>

    <el-dialog title="请打分" :visible.sync="dialogFormVisible">
      {{ jsex.default(selectQ, 'question.detail') }}
      <el-divider></el-divider>
      {{ selectQ.v }}
      <el-divider></el-divider>

      <el-form :model="scoreForm">
        <el-form-item label="分数" label-width="80px">
          <el-input-number
            v-model="scoreForm.score"
            autocomplete="off"
            :min="0"
            :max="jsex.default(selectQ, 'question.score', 10)"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="setScore()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as api from '/src/api/paperManagement'
  import * as qapi from '/src/api/questionManagement'
  import * as ansSapi from '/src/api/answerSheet'
  import { defaultPageSize } from '/src/config'
  import { QuestionType } from '/src/data/question'
  import * as jsex from '@/utils/jsex'
  import { formatDate } from '@/utils/formatDateTime'

  export default {
    name: 'Management',
    components: {},
    data() {
      return {
        questionType: QuestionType,
        idkey: 'id',
        jsex: jsex,
        currentTime: Date.now(),
        list: null,
        cardStyle: { padding: '15px' },
        cardStyleOption: { padding: '5px' },
        paper: {},
        paperQuestionDVData: [],
        answerSheet: {},
        dialogVisible: false,
        dialogFormVisible: false,
        scoreForm: {},
        selectQ: {},
      }
    },
    computed: {
      paperSumScore() {
        let sum = 0
        for (let i = 0; i < this.paperQuestionDVData.length; i++) {
          let dvDatum = this.paperQuestionDVData[i]
          sum += dvDatum.question.score
        }
        return sum
      },
      paperId() {
        return this.answerSheet.paperId
      },
      id() {
        return this.$route.params.id
      },
      remaining() {
        return (
          (this.paper.testDuration - 1) * 1000 * 60 -
          (this.currentTime - this.answerSheet.createDate)
        )
      },
      testDuration() {
        return this.currentTime - this.answerSheet.createDate
      },
    },
    created() {
      this.fetchData()
    },

    methods: {
      async setScore() {
        this.dialogFormVisible = false
        // this.selectQ = q
        await ansSapi.setScore(this.selectQ.answerDV.id, this.scoreForm)
        this.fetchData()
      },
      showScore(q) {
        this.selectQ = q
        this.dialogFormVisible = true
      },
      async commit() {
        console.log(this.paperQuestionDVData)
        let response = await ansSapi.commit(this.id, {
          data: this.paperQuestionDVData,
        })
        this.answerSheet = response.data
        this.dialogVisible = true
        console.log('ojbk')
      },

      closeClick() {
        window.open('/')
      },
      async fetchData() {
        let r = await ansSapi.answerSheetById(this.id)
        this.answerSheet = r.data
        let resp = await api.get(this.paperId)
        this.paper = resp.data
        resp = await ansSapi.getPaperQuestionDataAndV(
          this.paperId,
          this.answerSheet.id
        )
        this.paperQuestionDVData = resp.data
        console.log(this.paperQuestionDVData)
        for (let paperQuestionDVDatum of this.paperQuestionDVData) {
          if (paperQuestionDVDatum.question.type === 'Multi') {
            paperQuestionDVDatum.v = []
          }
        }

        if (this.answerSheet.resolve) {
          this.$confirm('该试卷已批改完，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '返回',
            type: 'warning',
          })
            .then(() => {})
            .catch(() => {
              window.open('/')
            })
        }
      },
      formatDate: formatDate,
      back() {
        window.open('/')
      },
    },
  }
</script>
<style scoped>
  .el-header {
    background-color: #fff;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }

  .el-card {
    text-align: center;
    margin: 5px;
  }

  .elcardoption {
    width: 350px;
    text-align: left;
    /*color: yellow;*/
  }

  .number {
    color: red;
    font-size: x-large;
    text-shadow: 1px;
  }

  .normaltext {
    font-size: large;
    text-shadow: 1px;
  }
</style>
